<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on</title>
</head>
<body>
    <div id="app">
        <input type="button" value="v-on事件" v-on:click="doIt">
        <input type="button" value="v-on简写" @click="doIt">
        <input type="button" value="双击事件" @dblclick="doIt">
        <h2 @click="changeFood">{{food}}</h2>
        <input type="button" value="星期" @mouseover="over"></p>
    </div>
    <div class="time">
        <input type="button" value="显示当前系统时间" @click="time">
        <div>{{times}}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        // var app=new Vue({
        //     el:"#app",
        //     data:{
        //         food:"米饭"
        //     },
        //     methods:{
        //         doIt:function(){
        //             alert("加油学习吧");
        //         },
        //         changeFood:function(){
        //             this.food+="好吃吗？"
        //         }
        //     }
        // }),
        // var p=new Vue({
        //     el:"#app",
        //     data:{
        //         information:"今天是星期五"
        //     },
        //     methods:{
        //         over:function(){
        //             alert("今天立秋了~");
        //         }
        //     }
        // })
        var time=new Vue({
            el:".time",
            data:{
                times:"某个时间"
            },
            methods:{
                time:function(){
                    this.times=getDate();
                }
            }
        })
        function getDate(){
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth()+1;
            var dates=date.getDate();
            var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
            var day=date.getDay();
            return "今天是："+year+"年"+month+"月"+dates+"日"+arr[day];
        }
    </script>
    
</body>
</html>